import { queryParkinglotNames } from '@/pages/Parking/Spot/service';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import type { ProColumns } from '@ant-design/pro-components';
import { ProTable } from '@ant-design/pro-components';
import { history } from 'umi';
import { useState } from 'react';
import { queryRenewalRecords } from './service';
import type { RenewalRecordTableItem } from './types.d';
import { PayMode } from '@/pages/ParkingOrder/types.d';
import { mapVehicleType } from '../utils';
import { Tooltip } from 'antd';
import { queryMemberCardNames } from '../MemberRecord/service';

export default () => {
  const [recordNo, setRecordNo] = useState<string>(String(history.location.state || ''));
  const columns: ProColumns<RenewalRecordTableItem>[] = [
    {
      title: '订单号',
      dataIndex: 'payNo',
      align: 'center',
      hideInForm: true,
      hideInSearch: true,
      hideInTable: true,
    },
    {
      title: '会员卡号',
      dataIndex: 'recordNo',
      // hideInTable: true,
      align: 'center',
      hideInForm: true,
      hideInSearch: true,
    },
    {
      title: '会员卡名',
      dataIndex: 'cardNo',
      align: 'center',
      hideInForm: true,
      fieldProps: {
        showSearch: true,
      },
      render: (_, record) => record.cardName,
      debounceTime: 300,
      request: (val) => queryMemberCardNames(val.keyWords),
    },
    {
      title: '适用车型',
      dataIndex: 'vehicleType',
      align: 'center',
      hideInForm: true,
      hideInSearch: true,
      renderText: (_, record) =>
        record?.vehicleType?.map((item) => mapVehicleType(item)).join(';') || '-',
    },
    {
      title: '用户车牌号',
      dataIndex: 'plateNumber',
      align: 'center',
      hideInForm: true,
    },
    {
      title: '路段名称',
      align: 'center',
      dataIndex: 'parkingLots',
      hideInForm: true,
      fieldProps: { showSearch: true },
      render: (_, record) => {
        let tempText = '-';
        if (record.allParkValid) {
          tempText = '全路段通用';
        } else {
          tempText =
            record?.parkingLots?.map((item) => item.parkingLotName).join('; ') ||
            record.parkingLotName;
        }
        return (
          <Tooltip title={tempText}>
            <div
              style={{
                maxWidth: '300px',
                overflow: 'hidden',
                textOverflow: 'ellipsis',
                margin: '0 auto',
              }}
            >
              {tempText}
            </div>
          </Tooltip>
        );
      },
      debounceTime: 300,
      request: (val) => queryParkinglotNames(val.keyWords || ''),
    },
    {
      title: '价格',
      align: 'center',
      dataIndex: 'amount',
      hideInForm: true,
      hideInSearch: true,
      valueType: 'money',
      renderText: (text) => text / 100,
    },
    {
      title: '卡类型',
      align: 'center',
      dataIndex: 'cardType',
      hideInForm: true,
      valueEnum: {
        year: '年卡',
        season: '季卡',
        month: '会员卡',
      },
    },
    {
      title: '续费天数',
      align: 'center',
      dataIndex: 'days',
      hideInForm: true,
      hideInSearch: true,
      renderText: (text) => `${text}天`,
    },
    {
      title: '支付方式',
      align: 'center',
      dataIndex: 'payMode',
      hideInSearch: true,
      valueEnum: {
        [PayMode.TENPAY]: { text: '微信支付' },
        [PayMode.ALIPAY]: { text: '支付宝' },
        [PayMode.CASH]: { text: '现金支付' },
        [PayMode.UNKNOWN]: { text: '其他' },
      },
    },
    {
      title: '支付时间',
      align: 'center',
      dataIndex: 'payTime',
      hideInForm: true,
      hideInSearch: true,
      valueType: 'dateTime',
    },
    {
      title: '办理来源',
      align: 'center',
      dataIndex: 'source',
      hideInForm: true,
      hideInSearch: true,
      render: (_, record) => {
        if (record.systemAdd || record.source == 0) {
          return '系统添加';
        }
        if (record.source == 1) {
          return '公众号购买';
        }
        if (record.source == 2) {
          return 'POS机办理';
        }
        return '公众号购买';
      },
    },
  ];
  return (
    <PageHeaderWrapper
      header={{
        title: '',
        subTitle: '会员卡购买记录',
        breadcrumb: {
          routes: [
            { path: '/', breadcrumbName: '首页' },
            { path: '/member', breadcrumbName: '会员卡管理' },
            { path: '/member/renewals', breadcrumbName: '购买记录' },
          ],
        },
      }}
    >
      <ProTable<RenewalRecordTableItem>
        columns={columns}
        rowKey="_id"
        scroll={{ x: true }}
        search={{
          labelWidth: 'auto',
        }}
        onReset={() => {
          setRecordNo('');
        }}
        style={{ whiteSpace: 'nowrap' }}
        dateFormatter="string"
        pagination={{
          showSizeChanger: true,
          showQuickJumper: true,
          defaultPageSize: 10,
          size: 'default',
        }}
        debounceTime={300}
        request={async (param, sort) => {
          if (recordNo && recordNo.length > 0) {
            param.recordNo = recordNo;
          }
          const res = await queryRenewalRecords(param, sort);
          return res;
        }}
      />
    </PageHeaderWrapper>
  );
};
